<template>
  <view class="page">
    <view class="main-page">
      <view class="list">
        <view class="list-item">
          头像
          <image class="user-pic" :src="userPic" @click="openPicUpdate"></image>
        </view>
        <view class="list-item">
          姓名
          <view class="rt-btn" @click="changeName">{{name}}</view>
        </view>
        <view class="list-item">
          账号
          <view class="rt-btn copy-btn" @click="copyId">{{id}}</view>
        </view>
        <view class="list-item">
          微信
          <view class="rt-btn" @click="bindWechat">{{wechatStatus ? '已绑定' : '未绑定'}}</view>
        </view>
        <view class="list-item">
          密码
          <view class="rt-btn" @click="changePassword">修改密码</view>
        </view>
      </view>
    </view>
    <!-- 弹窗 -->
    <uni-popup ref="popup"
      background-color="#fff"
      borderRadius="12px 12px 0px 0px"
      :mask-click="false">
      <view class="popup-content">
        <view class="popup-header">
          修改姓名
          <view class="close-icon" @click="closePopup">
            <image
              class="close-icon-image"
              referrerpolicy="no-referrer"
              src="./img/close.png"
            />
          </view>
        </view>
        <view class="popup-body">
          <view class="input-box">
            <input class="popup-input" placeholder="请输入教师姓名" v-model="new_name" />
            <view class="tip">{{ tip }}</view>
          </view>
          <view class="join-btn" @click="confirmChange">确定</view>
        </view>
      </view>
    </uni-popup>
    <bottomBackBtn v-if="showButtom"></bottomBackBtn>
  </view>
</template>

<script>
  import defaultPic from './img/default-header.png'
  export default {
    data() {
      return {
        showButtom: true,
        userPic: defaultPic,
        name: '张三',
        id: 'zs6789',
        wechatStatus: true,
        tip: '',
        new_name: '',
        myProfile: null,
        userInfo: null
      }
    },
    async onLoad() {
      this.myProfile = uni.getStorageSync('myProfile')
      await this.getData()
      this.name = this.userInfo.real_name
      this.id = this.userInfo.user_id
      this.wechatStatus = uni.getStorageSync('wechatStatus')
    },
    methods: {
      async getData() {
        let res = await this.API.UserFetchModel({
          user_id: this.myProfile.user_id
        })
        this.userInfo = res
      },
      openPicUpdate() {},
      changeName() {
        this.showButtom = false
        this.new_name = this.name
        this.$refs.popup.open('bottom')
      },
      closePopup() {
        this.$refs.popup.close()
        this.showButtom = true
      },
      async confirmChange() {
        this.userInfo.real_name = this.new_name
        let res = await this.API.UserUpdate(this.userInfo)
        if (res) {
          let myProfile = await this.API.MyProfile()
          if(myProfile.user_type_id == 3){
            uni.setStorageSync('myProfile', myProfile);
            this.name = this.userInfo.real_name
            this.id = this.userInfo.user_id
            this.wechatStatus = uni.getStorageSync('wechatStatus')
          }
          this.closePopup()
        }
      },
      copyId() {
        uni.setClipboardData({
          data: this.id,
          success() {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 1500
            })
          } 
        })
      },
      bindWechat() {
        uni.navigateTo({
          url: '/pages/my/bindWechat'
        });
      },
      changePassword() {
        uni.navigateTo({
          url: '/pages/my/changePassword'
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .popup-content {
    padding-top: 48rpx;
    .popup-header {
      padding: 0 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #262626;
      height: 50rpx;
      line-height: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .close-icon{
        width: 40rpx;
        height: 40rpx;
        .close-icon-image{
          width: 100%;
          height: 100%;
        }
      }
    }
    .popup-body {
      padding: 32rpx 56rpx calc(32rpx + env(safe-area-inset-bottom)) 56rpx;
  
      .join-btn {
        width: 100%;
        height: 92rpx;
        background: #2776FF;
        color: #fff;
        border-radius: 12rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        text-align: center;
        line-height: 92rpx;
      }
      .popup-input {
        height: 128rpx;
        line-height: 128rpx;
        background: #FFFFFF;
        box-shadow: inset 0px -1px 0px 0px #E6EBF1;
        font-size: 32rpx;
        color: #262626;
        &::placeholder {
          color: #BFBFBF;
          font-weight: 400;
          font-size: 32rpx;
        }
      }
      .tip {
        height: 48rpx;
        line-height: 48rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #FF4D4F;
      }
      .input-box {
        height: 276rpx;
      }
    }
  }
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  .main-page {
    height: calc(100% - 144rpx - env(safe-area-inset-bottom));
    padding: 24rpx;
    .list {
      background: #FFFFFF;
      border-radius: 24px;
      padding: 0 32rpx;
      .list-item {
        height: 128rpx;
        background: #FFFFFF;
        box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6EBF1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        .user-pic {
          width: 80rpx;
          height: 80rpx;
        }
        .rt-btn {
          width: 50%;
          height: 100%;
          line-height: 128rpx;
          padding-right: 48rpx;
          position: relative;
          text-align: right;
          &::after {
            content: '';
            position: absolute;
            top: 48rpx;
            right: 0;
            width: 32rpx;
            height: 32rpx;
            background: url("./img/right.png") no-repeat;
            background-size: contain;
          }
          &.copy-btn::after{
            content: '';
            position: absolute;
            width: 32rpx;
            height: 32rpx;
            background: url("./img/copy.png") no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
}
</style>